import React, { Component } from 'react'
import Axios from 'axios'
import Com from '../../components/List'
import TOP from '../../components/TOP'
import Banner from '../../components/List-rig'
class View extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [],
    }
  }
  addapi(page = 1) {
    Axios.get('api/feeds', { page: page }).then((res) => {
      // console.log(res.data.data)
      if (res.data.data.count === 200) {
        this.setState({
          ...this.state,
          list: res.data.data.feeds,
        })
      }
    })
  }
  componentDidMount() {
    this.addapi()
  }
  render() {
    let { list } = this.state
    return (
      <div className="home clear">
        <div className="list left">
          <div>
            {list.map((res) => {
              return <Com key={res.id} obj={res} />
            })}
          </div>
          <div className="listBot">
            <a href="/not">获取更多热榜内容</a>
          </div>
        </div>
        <div className="right-list right">
          <Banner />
          <a
            className="extra-common-con border-bottom1"
            href="/not"
            target="_blank"
          >
            <img
              className="rule-icon"
              src="https://dig.chouti.com/images/rule-1a229473ee.png"
              alt="?"
            />
            <span className="rule-txt">抽屉生存法则</span>
            <span className="divide-line" />
            <span className="rule-note">如何避免自己被封号</span>
          </a>
          <a className="extra-common-con mb18" href="/not">
            <img
              className="rule-icon"
              src="https://dig.chouti.com/images/manage-a2d77a62ed.png"
              alt="?"
            />
            <span className="rule-txt">抽屉管理公告</span>
            <span className="divide-line" />
            <span className="rule-note">《生存法则》修正案</span>
          </a>
          <TOP />
        </div>
      </div>
    )
  }
}
export default View
